<template>
  <div style="background: #f8fafd; padding: 15px">
    <el-container>
      <el-header>
        <i>
          <span>点位搜索：</span
          ><el-input v-model="searchP.name" clearable></el-input>
        </i>
        <i>
          <span>区域搜索：</span>
          <el-select v-model="searchP.regionId" placeholder="请选择" clearable>
            <el-option
              v-for="item in zoneList"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            >
            </el-option>
          </el-select>
        </i>
        <el-button type="primary" icon="el-icon-search" @click="search"
          >查询</el-button
        >
      </el-header>
      <el-main>
        <div class="main-header">
          <el-button @click="handleAdd"
            ><i class="el-icon-circle-plus-outline"></i>新建</el-button
          >
        </div>
        <div class="main-main">
          <el-table :data="tableData" style="width: 100%">
            <el-table-column label="序号" width="120">
              <template slot-scope="scope">
                <span style="margin-left: 10px">
                  {{ scope.$index + 1 }}
                </span>
              </template>
            </el-table-column>
            <el-table-column label="点位名称" width="200">
              <template slot-scope="scope">
                <div slot="reference" class="name-wrapper">
                  {{ scope.row.name }}
                </div>
              </template>
            </el-table-column>
            <el-table-column label="所在区域" width="200">
              <template slot-scope="scope">
                <div>
                  {{ scope.row.region?.name }}
                </div>
              </template>
            </el-table-column>
            <el-table-column label="商圈类型" width="200">
              <template slot-scope="scope">
                <div>
                  {{ scope.row.businessType?.name }}
                </div>
              </template>
            </el-table-column>
            <el-table-column label="合作商" width="200">
              <template slot-scope="scope">
                <div>
                  {{ scope.row.ownerName }}
                </div>
              </template>
            </el-table-column>
            <el-table-column label="详情地址" width="200">
              <template slot-scope="scope">
                <div>
                  {{ scope.row.region?.remark }}
                </div>
              </template>
            </el-table-column>
            <el-table-column label="操作">
              <template slot-scope="scope">
                <el-button
                  size="mini"
                  @click="handleSee(scope.$index, scope.row)"
                  >查看详情</el-button
                >
                <el-button
                  size="mini"
                  @click="handleEdit(scope.$index, scope.row)"
                  >编辑</el-button
                >
                <el-button
                  size="mini"
                  type="danger"
                  @click="handleDelete(scope.$index, scope.row)"
                  >删除</el-button
                >
              </template>
            </el-table-column>
          </el-table>
          <div class="main-footer">
            <p>
              共{{ pointList.totalCount }}条记录，第{{ pointList.pageIndex }}/{{
                pointList.totalPage
              }}页
            </p>
            <div>
              <el-button
                @click="lastPage"
                :disabled="pointList.pageIndex === '1' ? true : false"
                >上一页</el-button
              >
              <el-button
                @click="nextPage"
                :disabled="
                  pointList.pageIndex >= pointList.totalPage ? true : false
                "
                >下一页</el-button
              >
            </div>
          </div>
        </div>
      </el-main>
      <el-dialog
        :visible.sync="dialogFormVisible"
        width="630px"
        :title="flag1 ? '修改点位' : '新增点位'"
      >
        <el-form ref="remark" :model="form" :rules="rules">
          <el-form-item
            label="点位名称:"
            :label-width="formLabelWidth"
            prop="name"
          >
            <el-input
              v-model="form.name"
              autocomplete="off"
              maxlength="15"
              show-word-limit
              placeholder="请输入点位名称"
            >
            </el-input>
          </el-form-item>
          <el-form-item
            label="所在区域:"
            :label-width="formLabelWidth"
            prop="addr"
          >
            <el-select v-model="form.regionId" placeholder="请选择">
              <el-option
                v-for="item in zoneList"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              >
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item
            label="所属商圈:"
            :label-width="formLabelWidth"
            prop="addr"
          >
            <el-select v-model="form.businessId" placeholder="请选择">
              <el-option
                v-for="item in businessType"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              >
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item
            label="归属合作商:"
            :label-width="formLabelWidth"
            prop="addr"
          >
            <el-select
              v-model="form.ownerName"
              placeholder="请选择"
              @change="getOwnerId"
            >
              <el-option
                v-for="item in PartnerList"
                :key="item.account"
                :label="item.name"
                :value="item.name"
                @change="getOwnerID(item.id)"
              >
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item
            label="详情地址:"
            :label-width="formLabelWidth"
            prop="addr"
          >
            <el-cascader
              size="large"
              :options="options"
              v-model="selectedOptions"
              @change="handleChange"
            >
            </el-cascader>
          </el-form-item>
          <el-form-item
            label="详情地址:"
            :label-width="formLabelWidth"
            prop="addr"
          >
            <el-input type="textarea" v-model="form.addr"></el-input>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogFormVisible = false">取 消</el-button>
          <el-button type="primary" @click="point">确 定</el-button>
        </div>
      </el-dialog>
      <el-dialog :visible.sync="dialogVisible" title="查看详情">
        <el-table stripe :data="PointSee">
          <el-table-column label="序号">
            <template slot-scope="scope">
              {{ scope.$index + 1 }}
            </template>
          </el-table-column>
          <el-table-column label="机器编号">
            <template slot-scope="scope">
              {{ scope.row.innerCode }}
            </template>
          </el-table-column>
          <el-table-column label="设备状态">
            <template slot-scope="scope">
              {{ scope.row.vmStatus }}
            </template>
          </el-table-column>
          <el-table-column label="最后一次供货时间">
            <template slot-scope="scope">
              {{ scope.row.lastSupplyTime }}
            </template>
          </el-table-column>
        </el-table>
      </el-dialog>
    </el-container>
  </div>
</template>

<script>
import {
  searchPointList,
  removePoint,
  getbusinessType,
  addPoint,
  changePoint,
  pointSee,
  searchPoint
} from '@/api/pointManagement'
import { getZoneList } from '@/api/zoneManagement'
import { getPartnerList } from '@/api/PartnerManagement'
import { regionDataPlus, CodeToText } from 'element-china-area-data'
export default {
  name: 'point-management',
  components: {},
  props: {},
  data() {
    return {
      options: regionDataPlus,
      dialogVisible: false,
      searchP: {
        name: '',
        regionId: ''
      },
      selectedOptions: [],
      PointId: '',
      PointSee: [],
      tableData: [],
      pointList: [],
      AllPointList: [],
      zoneList: [],
      businessType: [],
      PartnerList: [],
      flag: true,
      flag1: true,
      searcharea: '',
      Query: {
        pageIndex: 1,
        pageSize: 10
      },
      Query1: {
        pageIndex: 1,
        pageSize: 10
      },
      Query2: {
        pageIndex: 1,
        pageSize: 10
      },
      gridData: [],
      dialogTableVisible: false,
      dialogFormVisible: false,
      form: {
        name: '',
        addr: '',
        areaCode: 110100,
        createUserId: 1,
        regionId: '',
        businessId: '',
        ownerId: '',
        ownerName: ''
      },
      formLabelWidth: '120px',
      rules: {
        name: [{ required: true, message: '请输入点位名称', trigger: 'blur' }],
        addr: [{ required: true, message: '请输入详情地址', trigger: 'blur' }]
      },
      value1: '',
      value2: '',
      vmStatus: ''
    }
  },
  computed: {},
  watch: {},
  async created() {
    this.getPointList()
    this.getAllList()
  },
  methods: {
    handleChange() {
      let loc = ''
      for (let i = 0; i < this.selectedOptions.length; i++) {
        loc += CodeToText[this.selectedOptions[i]]
      }
      console.log(loc) // 打印区域码所对应的属性值即中文地址
    },
    getOwnerId() {
      this.form.ownerId = this.PartnerList.filter((item) => {
        return this.form.ownerName === item.name
      })[0].id
    },
    async search() {
      const res = await searchPoint(this.searchP)
      this.tableData = res.currentPageRecords
      this.pointList = res
    },
    async getPointList() {
      const res = await searchPointList(this.Query)
      console.log(res)
      this.tableData = res.currentPageRecords
      this.pointList = res
    },
    async handleEdit(index, row) {
      this.flag1 = true
      this.dialogFormVisible = true
      this.form.name = row.name
      await this.getAllList()
      this.form.addr = row.region.remark
      this.form.ownerName = row.ownerName
      this.form.regionId = row.region.id
      this.form.businessId = row.businessType.id
      this.PointId = row.id - 0

      this.form.ownerId =
        this.PartnerList.filter((item) => {
          return this.form.ownerName === item.name
        })[0].id - 0
    },
    async getAllList() {
      const res = await getZoneList(this.Query)
      this.zoneList = res.currentPageRecords
      for (let i = 1; i <= res.totalPage; i++) {
        if (res.pageIndex * 1 < res.totalPage * 1) {
          this.Query.pageIndex = this.Query.pageIndex + 1
          const res = await getZoneList(this.Query)
          this.zoneList.push(...res.currentPageRecords)
        }
      }
      const res1 = await getbusinessType()
      this.businessType = res1
      const res2 = await getPartnerList(this.Query1)
      this.PartnerList = res2.currentPageRecords
      for (let i = 1; i <= res2.totalPage; i++) {
        if (res2.pageIndex * 1 <= res2.totalPage * 1) {
          this.Query1.pageIndex = this.Query1.pageIndex + 1
          const res = await getZoneList(this.Query1)
          this.PartnerList.push(...res.currentPageRecords)
        }
      }
      const data = await searchPointList(this.Query2)
      this.AllPointList = data.currentPageRecords
      for (let i = 1; i <= data.totalPage; i++) {
        if (data.pageIndex * 1 < data.totalPage * 1) {
          this.Query2.pageIndex = this.Query2.pageIndex + 1
          const data1 = await searchPointList(this.Query2)
          this.AllPointList.push(...data1.currentPageRecords)
        }
      }
      this.Query.pageIndex = 1
      this.Query1.pageIndex = 1
      this.Query2.pageIndex = 1
    },
    async point() {
      if (this.flag1 === false) {
        await this.$refs.remark.validate()
        const res = await addPoint(this.form)
        console.log(res)
        this.getPointList()
        this.dialogFormVisible = false
        // this.$refs.remark.resetFields()
        // this.form.ownerName = ''
        // this.form.regionId = ''
        // this.form.businessId = ''
      } else {
        const res = await changePoint(this.form, this.PointId)
        console.log(res)
        this.getPointList()
        this.dialogFormVisible = false
      }
    },
    async handleDelete(index, row) {
      const res = await removePoint(row.regionId)
      console.log(res)
      this.getPointList()
    },
    async handleSee(index, row) {
      this.dialogVisible = true
      const res = await pointSee(row.id)
      console.log(res)
      res.forEach((item) => {
        if (item.vmStatus === 0) {
          item.vmStatus = '未投放'
        } else if (item.vmStatus === 1) {
          item.vmStatus = '运营'
        } else {
          item.vmStatus = '撤机'
        }
      })
      this.PointSee = res
    },
    async handleAdd() {
      this.dialogFormVisible = true
      this.flag1 = false
      // this.$refs.remark.resetFields()
      this.form.addr = ''
      this.form.name = ''
      this.form.ownerName = ''
      this.form.regionId = ''
      this.form.businessId = ''

      // const res = await addPoint()
      // console.log(res)
    },
    async nextPage() {
      this.Query.pageIndex = this.Query.pageIndex + 1
      this.getPointList()
    },
    async lastPage() {
      this.Query.pageIndex = this.Query.pageIndex - 1
      this.getPointList()
    }
  }
}
</script>

<style scoped lang="scss">
.el-header {
  background-color: #fff;
  i:nth-child(2) {
    margin-left: 10px;
  }
}
::v-deep .el-main {
  margin-top: 15px;
  height: 100vh;
  background-color: #fff;
}
.main-header {
  margin-bottom: 5px;
  .el-button {
    background-color: #e54b15;
    color: #fff;
    .el-icon-circle-plus-outline {
      margin-right: 5px;
    }
  }
}
.main-footer {
  margin-top: 15px;
  display: flex;
  justify-content: space-between;
  .el-button {
    transform: scale(0.9);
    margin-right: 10px;
  }
  p {
    margin-left: 10px;
  }
}
::v-deep .el-dialog {
  border-radius: 10px;
  .el-input__inner {
    width: 400px;
    height: 40px;
  }
  .el-textarea__inner {
    width: 400px;
    height: 80px;
  }
  .el-form {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
  }
  .dialog-footer {
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    bottom: 30px;
  }
  .el-dialog__title {
    font-weight: 700;
    font-size: 18px;
  }
}
::v-deep .el-header {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  .el-input {
    width: 200px;
    .el-input__inner {
      height: 30px;
    }
  }
  .el-button {
    height: 40px;
    margin-left: 10px;
    text-align: center;
    transform: scale(0.8);
    // line-height: -10px;
  }
}
</style>
